<template>
  <basic-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
<!--      <el-tab-pane label="网站应用" name="A">-->
<!--        &lt;!&ndash;        注释        &ndash;&gt;-->
<!--        <div>-->
<!--          <h5>温馨提示：</h5>-->
<!--          <p>设置后商城可在微信服务号里工作</p>-->
<!--          <p>如果使用微信扫码分销功能，需要开通微信开发者模式</p>-->
<!--          <p>微信开放平台：-->
<!--            <el-link href="https://open.weixin.qq.com" target="_blank">https://open.weixin.qq.com</el-link>-->
<!--          </p>-->
<!--          <p>微信公众平台:-->
<!--            <el-link href="https://mp.weixin.qq.com" target="_blank">https://mp.weixin.qq.com</el-link>-->
<!--          </p>-->
<!--          <p>微信商户平台：-->
<!--            <el-link href="https://pay.weixin.qq.com" target="_blank">https://pay.weixin.qq.com</el-link>-->
<!--            （由于商户平台需要使用特定插件，建议在ie中打开。）-->
<!--          </p>-->
<!--          <p>微信服务号和支付配置文档：-->
<!--            <el-link href="http://test.lightkitch.com/front/doc_weixinAlipayConfigure.htm" target="_blank">-->
<!--              http://test.lightkitch.com/front/doc_weixinAlipayConfigure.htm-->
<!--            </el-link>-->
<!--          </p>-->
<!--        </div>-->
<!--        <div style="width:50%;margin-top: 10px;">-->
<!--          <avue-form ref="form" v-model="objA" :option="optionA" @submit="submitA">-->
<!--          </avue-form>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="移动应用" name="B">-->
<!--        <div>-->
<!--          <h5>温馨提示：</h5>-->
<!--          <p>设置后商城可在微信服务号里工作</p>-->
<!--          <p>如果使用微信扫码分销功能，需要开通微信开发者模式</p>-->
<!--          <p>微信开放平台：-->
<!--            <el-link href="https://open.weixin.qq.com" target="_blank">https://open.weixin.qq.com</el-link>-->
<!--          </p>-->
<!--          <p>微信公众平台:-->
<!--            <el-link href="https://mp.weixin.qq.com" target="_blank">https://mp.weixin.qq.com</el-link>-->
<!--          </p>-->
<!--          <p>微信商户平台：-->
<!--            <el-link href="https://pay.weixin.qq.com" target="_blank">https://pay.weixin.qq.com</el-link>-->
<!--            （由于商户平台需要使用特定插件，建议在ie中打开。）-->
<!--          </p>-->
<!--          <p>微信支付配置文档：-->
<!--            <el-link href="http://test.lightkitch.com/front/doc_WeChatOnline.htm" target="_blank">-->
<!--              http://test.lightkitch.com/front/doc_WeChatOnline.htm-->
<!--            </el-link>-->
<!--          </p>-->
<!--        </div>-->
<!--        <div style="width:50%;margin-top: 10px;">-->
<!--          <avue-form ref="form" v-model="objB" :option="optionB" @submit="submitB">-->
<!--          </avue-form>-->

<!--        </div>-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="小程序" name="C">
        <div>
          <h5>温馨提示：</h5>
          <p>设置后商城可在微信服务号里工作</p>
          <p>如果使用微信扫码分销功能，需要开通微信开发者模式</p>
          <p>微信开放平台：
            <el-link href="https://open.weixin.qq.com" target="_blank">https://open.weixin.qq.com</el-link>
          </p>
          <p>微信公众平台:
            <el-link href="https://mp.weixin.qq.com" target="_blank">https://mp.weixin.qq.com</el-link>
          </p>
          <p>微信商户平台：
            <el-link href="https://pay.weixin.qq.com" target="_blank">https://pay.weixin.qq.com</el-link>
            （由于商户平台需要使用特定插件，建议在ie中打开。）
          </p>
          <p>微信小程序配置文档：
            <el-link href="http://test.lightkitch.com/front/doc_SmallprogramApplication.htm" target="_blank">
              http://test.lightkitch.com/front/doc_SmallprogramApplication.htm
            </el-link>
          </p>
        </div>
        <div style="width:50%;margin-top: 10px;">
          <avue-form ref="form" v-model="objC" :option="optionC" @submit="submitC">
          </avue-form>
        </div>
      </el-tab-pane>
<!--      <el-tab-pane label="公众账号" name="D">-->
<!--        <div style="width:50%;margin-top: 10px;">-->
<!--          <avue-form ref="form" v-model="objD" :option="optionD" @submit="submitD">-->
<!--          </avue-form>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="回调地址" name="E">-->
<!--        <div style="width:50%;margin-top: 10px;">-->
<!--          <avue-form ref="form" v-model="objE" :option="optionE" @submit="submitE">-->
<!--          </avue-form>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </basic-container>
</template>

<script>
    import {
        getWx,
        setWx
    } from "../../api/base/sysSet/wxSet";
    import {
        convertAddCode
    } from '@/util/util';

    export default {
        data() {
            return {
                activeName: 'C',
                objA: {},
                objB: {},
                objC: {},
                objD: {},
                objE: {},
                optionA: {
                    emptyBtn: false,
                    labelWidth: '120',
                    labelPosition: 'left',
                    column: [{
                        label: "pc端应用id",
                        prop: "wxpayPcAppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入pc端应用id",
                            trigger: "blur",
                        }],
                        /* change: (value) => {
                          console.log(value)
                          let idContent = encodeURIComponent(value.value)
                          console.log(idContent)
                          return idContent
                        } */
                    }, {
                        label: "pc端密钥",
                        prop: "wxpayPcKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入pc端密钥",
                            trigger: "blur"
                        }]
                    }, {
                        label: "pc端商户号",
                        prop: "wxpayPcMchId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入pc端商户号",
                            trigger: "blur"
                        }]

                    }, {
                        label: "pc端证书路径",
                        prop: "wxpayPcCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "pc端证书路径",
                            trigger: "blur"
                        }]
                    }, {
                        label: "pc端Api密钥",
                        prop: "wxpayPcApiKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "pc端Api密钥",
                            trigger: "blur"
                        }]
                    }]
                },
                optionB: {
                    emptyBtn: false,
                    labelWidth: '120',
                    labelPosition: 'left',
                    column: [{
                        label: "app端应用id",
                        prop: "wxpayAppAppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入app端应用id",
                            trigger: "blur"
                        }]
                    }, {
                        label: "app端密钥",
                        prop: "wxpayAppKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入app端密钥",
                            trigger: "blur"
                        }]
                    }, {
                        label: "app端商户号",
                        prop: "wxpayAppMchId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入app端商户号",
                            trigger: "blur"
                        }]

                    }, {
                        label: "app端证书路径",
                        prop: "wxpayAppCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "app端证书路径",
                            trigger: "blur"
                        }]
                    }, {
                        label: "app端Api密钥",
                        prop: "wxpayAppApiKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "app端Api密钥",
                            trigger: "blur"
                        }]
                    }]
                },
                optionC: {
                    emptyBtn: false,
                    labelWidth: '120',
                    labelPosition: 'left',
                    column: [{
                        label: "应用id",
                        prop: "wxpayXcxAppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入公众号、小程序端应用id",
                            trigger: "blur"
                        }]
                    }, {
                        label: "密钥",
                        prop: "wxpayXcxAppKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入公众号、小程序端密钥",
                            trigger: "blur"
                        }]
                    }
                    //   {
                    //     label: "商户号",
                    //     prop: "wxpayXcxMchId",
                    //     span: 24,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入公众号、小程序端商户号",
                    //         trigger: "blur"
                    //     }]
                    //
                    // }, {
                    //     label: "证书路径",
                    //     prop: "wxpayXcxCertPath",
                    //     span: 24,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入公众号、小程序端证书路径",
                    //         trigger: "blur"
                    //     }]
                    // }, {
                    //     label: "Api密钥",
                    //     prop: "wxpayXcxApiKey",
                    //     span: 24,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入密钥",
                    //         trigger: "blur"
                    //     }]
                    // }
                    ]
                },
                optionD: {
                    emptyBtn: false,
                    labelWidth: '120',
                    labelPosition: 'left',
                    column: [{
                        label: "应用id",
                        prop: "wxpayH5AppId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入应用id",
                            trigger: "blur"
                        }]
                    }, {
                        label: "密钥",
                        prop: "wxpayH5Key",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入端密钥",
                            trigger: "blur"
                        }]
                    }, {
                        label: "商户号",
                        prop: "wxpayH5MchId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入端商户号",
                            trigger: "blur"
                        }]

                    }, {
                        label: "证书路径",
                        prop: "wxpayH5CertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入证书路径",
                            trigger: "blur"
                        }]
                    }, {
                        label: "Api密钥",
                        prop: "wxpayH5ApiKey",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入Api密钥",
                            trigger: "blur"
                        }]
                    }]
                },
                optionE: {
                    emptyBtn: false,
                    labelWidth: '120',
                    labelPosition: 'left',
                    column: [{
                        label: "支付回调地址",
                        prop: "wxpayNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入回调地址",
                            trigger: "blur"
                        }]
                    }, {
                        label: "退款回调地址",
                        prop: "wxpayRefundNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入回调地址",
                            trigger: "blur"
                        }]
                    }]
                },

            }
        },
        //页面初始化
        created() {
            this.getData()
        },
        methods: {
            getData() {
                getWx().then(res => {
                    console.log(res)
                    if(res.data.code == 200) {
                        let obj = res.data.data
                        //pc
                        this.objA.wxpayPcAppId = obj.wxpayPcAppId
                        this.objA.wxpayPcKey = obj.wxpayPcKey
                        this.objA.wxpayPcMchId = obj.wxpayPcMchId
                        this.objA.wxpayPcCertPath = obj.wxpayPcCertPath
                        this.objA.wxpayPcApiKey = obj.wxpayPcApiKey

                        //    App
                        this.objB.wxpayAppAppId = obj.wxpayAppAppId
                        this.objB.wxpayAppKey = obj.wxpayAppKey
                        this.objB.wxpayAppMchId = obj.wxpayAppMchId
                        this.objB.wxpayAppCertPath = obj.wxpayAppCertPath
                        this.objB.wxpayAppApiKey = obj.wxpayAppApiKey
                        //    小程序
                        this.objC.wxpayXcxAppId = obj.wxpayXcxAppId
                        this.objC.wxpayXcxAppKey = obj.wxpayXcxAppKey
                        this.objC.wxpayXcxMchId = obj.wxpayXcxMchId
                        this.objC.wxpayXcxCertPath = obj.wxpayXcxCertPath
                        this.objC.wxpayXcxApiKey = obj.wxpayXcxApiKey
                        //   h5
                        this.objD.wxpayH5AppId = obj.wxpayH5AppId
                        this.objD.wxpayH5Key = obj.wxpayH5Key
                        this.objD.wxpayH5MchId = obj.wxpayH5MchId
                        this.objD.wxpayH5CertPath = obj.wxpayH5CertPath
                        this.objD.wxpayH5ApiKey = obj.wxpayH5ApiKey
                        //回调地址
                        this.objE.wxpayNotifyUrl = obj.wxpayNotifyUrl
                        this.objE.wxpayRefundNotifyUrl = obj.wxpayRefundNotifyUrl
                    }
                })

            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            submitA(form, done) {
                let dataA = {
                    wxpayPcAppId: encodeURIComponent(this.objA.wxpayPcAppId),
                    wxpayPcKey: encodeURIComponent(this.objA.wxpayPcKey),
                    wxpayPcMchId: encodeURIComponent(this.objA.wxpayPcMchId),
                    wxpayPcCertPath: encodeURIComponent(this.objA.wxpayPcCertPath),
                    wxpayPcApiKey: encodeURIComponent(this.objA.wxpayPcApiKey)
                }
                convertAddCode(dataA.wxpayPcAppId,data=>{
                    dataA.wxpayPcAppId = data;
                });
                convertAddCode(dataA.wxpayPcKey,data=>{
                    dataA.wxpayPcKey = data;
                });
                convertAddCode(dataA.wxpayPcApiKey,data=>{
                    dataA.wxpayPcApiKey = data;
                });
                console.log(dataA)
                setWx(dataA).then(() => {
                    done()
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.activeName = 'A'
                    this.getData()
                })
            },
            submitB(form, done) {
                let dataB = {
                    wxpayAppAppId: encodeURIComponent(this.objB.wxpayAppAppId),
                    wxpayAppKey: encodeURIComponent(this.objB.wxpayAppKey),
                    wxpayAppMchId: encodeURIComponent(this.objB.wxpayAppMchId),
                    wxpayAppCertPath: encodeURIComponent(this.objB.wxpayAppCertPath),
                    wxpayAppApiKey: encodeURIComponent(this.objB.wxpayAppApiKey)
                }
                convertAddCode(dataB.wxpayAppAppId,data=>{
                    dataB.wxpayAppAppId = data;
                });
                convertAddCode(dataB.wxpayAppKey,data=>{
                    dataB.wxpayAppKey = data;
                });
                convertAddCode(dataB.wxpayAppApiKey,data=>{
                    dataB.wxpayAppApiKey = data;
                });
                setWx(dataB).then(() => {
                    done();
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.activeName = 'B'
                    this.getData()
                })
            },
            submitC(form, done) {
                let dataC = {
                    wxpayXcxAppId: encodeURIComponent(this.objC.wxpayXcxAppId),
                    wxpayXcxAppKey: encodeURIComponent(this.objC.wxpayXcxAppKey),
                    wxpayXcxMchId: encodeURIComponent(this.objC.wxpayXcxMchId),
                    wxpayXcxCertPath: encodeURIComponent(this.objC.wxpayXcxCertPath),
                    wxpayXcxApiKey: encodeURIComponent(this.objC.wxpayXcxApiKey)
                }
                convertAddCode(dataC.wxpayXcxAppId,data=>{
                    dataC.wxpayXcxAppId = data;
                });
                convertAddCode(dataC.wxpayXcxAppKey,data=>{
                    dataC.wxpayXcxAppKey = data;
                });
                convertAddCode(dataC.wxpayXcxApiKey,data=>{
                    dataC.wxpayXcxApiKey = data;
                });
                setWx(dataC).then(() => {
                    done();
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.activeName = 'C'
                    this.getData()
                })
            },
            submitD(form, done) {
                let dataD = {
                    wxpayH5AppId: encodeURIComponent(this.objD.wxpayH5AppId),
                    wxpayH5Key: encodeURIComponent(this.objD.wxpayH5Key),
                    wxpayH5MchId: encodeURIComponent(this.objD.wxpayH5MchId),
                    wxpayH5CertPath: encodeURIComponent(this.objD.wxpayH5CertPath),
                    wxpayH5ApiKey: encodeURIComponent(this.objD.wxpayH5ApiKey)
                }
                convertAddCode(dataD.wxpayH5AppId,data=>{
                    dataD.wxpayH5AppId = data;
                });
                convertAddCode(dataD.wxpayH5Key,data=>{
                    dataD.wxpayH5Key = data;
                });
                convertAddCode(dataD.wxpayH5ApiKey,data=>{
                    dataD.wxpayH5ApiKey = data;
                });
                setWx(dataD).then(() => {
                    done();
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.activeName = 'D'
                    this.getData()
                })
            },
            submitE(form, done) {
                let dataE = {
                    wxpayNotifyUrl: encodeURIComponent(this.objE.wxpayNotifyUrl),
                    wxpayRefundNotifyUrl: encodeURIComponent(this.objE.wxpayRefundNotifyUrl),
                }
                setWx(dataE).then(() => {
                    done();
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.activeName = 'E'
                    this.getData()
                })
            },
        }
    };
</script>
<style>
  h5 {
    color: darkred;
    font-weight: bold;
  }

  p {
    line-height: 30px;
  }

</style>